import { pageArea } from '@/services/api/api-datahub-area';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { message, Tag } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import EditArea from './EditArea';

interface TableAreaProps {
  onSaveSuccess: () => void;
}
const TableArea: React.FC<TableAreaProps> = ({ onSaveSuccess }) => {

  const userRef = useRef<ActionType>();

  const nickNames = useRef<Array<{ name: string}>>([])

  const columns: ProColumns<DatahubAreaData.AreaPage>[] = [
    {
      title: '名称',
      key: 'name',
      dataIndex: 'name',
      width: '180px',
    },
    {
      title: '昵称',
      key: 'nickNames',
      dataIndex: 'nickNames',
      width: '180px',
      search: false,
      render(dom, entity, index, action, schema) {
        return entity.nickNames.map((item) => (
          <Tag
            color='#2db7f5'
          >
            {item}
          </Tag>
        ))
      },
    },

    {
      title: '操作',
      valueType: 'option',
      width: '70px',
      fixed: 'right',
      render: (_, row, index, action) => [
        <EditArea
          data={row}
          onRefurbish={() => {
            userRef.current?.reload();
          }}
        />,
        // <ModalForm
        //   key={'delete_record_modal_form'}
        //   title="是否删除"
        //   trigger={<a key="delete_record_a"> 删除</a>}
        //   autoFocusFirstInput
        //   modalProps={{
        //     width: 400,
        //     destroyOnClose: true,
        //   }}
        //   onFinish={async (values) => {
        //     // const response = await deleteKeyword({ id: row.id, organizationId: organization?.key });
        //     // if (response.code === 0) {
        //     //   message.success('删除成功！');
        //     //   userRef.current?.reload();
        //     //   action?.reload();
        //     //   return true;
        //     // }
        //   }}
        // >
        //   该关键词将会被删除，是否确定
        // </ModalForm>,
      ],
    },
  ];

  // useEffect(() => {
  //   userRef.current?.reloadAndRest();
  //   console.log(organization, String(organization?.pos).length);
  // }, [organization]);

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await pageArea({
      ...params,
    });

    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  return (
    <ProTable
      // ghost
      // search={false}
      columns={columns}
      actionRef={userRef}
      request={request}
      sticky
      rowKey="id"
      tableLayout="fixed"
      dateFormatter="string"
      bordered
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        defaultPageSize: 20,
      }}
    // toolBarRender={() => [
    //   String(organization?.pos).length > 6 && organization?.key !== '0' && (
    //     <AddKeyword
    //       organization={organization}
    //       onRefurbish={() => {
    //         userRef.current?.reload();
    //         onSaveSuccess();
    //       }}
    //     />
    //   ),
    // ]}
    />
  );
};
export default TableArea;
